

let VSHADER_SOURCE = 
	'attribute vec4 a_Position;\n' + 
	'attribute float a_PointSize;\n' +
	'void main() {\n' +
	' gl_Position = a_Position;\n' +
	' gl_PointSize = a_PointSize;\n' +
	'}\n';

let FSHADER_SOURCE = 
	'void main() {\n' +
	'	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
	'}\n';


function main() {
	
	let canvas = document.getElementById("webgl");
	let gl = getWebGLContext(canvas);

	if (!gl) {
		console.log("Failed to get the rendering context for WebGL.");
		return;
	}

	if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
		console.log("Failed to intialize shaders.");
		return;
	}

	let n = initVertexBuffers(gl);
	if (n < 0) {
		console.log("Failed to set the positions of the vertices.");
		return;
	}

	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawArrays(gl.POINTS, 0, n);
}

function initVertexBuffers(gl) {
	let vertices = new Float32Array([
		0, 0.5, 
		-0.5, -0.5,  
		0.5, -0.5]);

	let n = 3;

	let sizes = new Float32Array([10.0, 20.0, 30.0]);

	let vertexBuffer = gl.createBuffer();
	if (!vertexBuffer) {
		console.log('failed to create the buffer object');
		return -1;
	}

	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

	let a_Position= gl.getAttribLocation(gl.program, 'a_Position');
	if (a_Position < 0) {
		console.log("Failed to get the storage location of a_Position");
		return -1;
	}
	gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(a_Position);

	let sizeBuffer = gl.createBuffer();
	if (!sizeBuffer) {
		console.log('failed to create the buffer object');
		return -1;
	}
	gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW);
	let a_PointSize = gl.getAttribLocation(gl.program, "a_PointSize");
	gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(a_PointSize);


	return n;
}
